<template>
  <div style="height: 100%;">
    <div class="title">
      <div></div>
      <div class="footer">
        {{ form.danweiname }} {{ form.dateType == '1' ? form.value1 : form.dateType == '2' ? form.value2 : form.value3 }} 水电气流向图
      </div>
      <div class="danwei">单位:   {{ danwei }}</div>
    </div>
    <div class="nenghaoimage" ref="nenghaoimage" style="height: 92%;"></div>
  </div>
</template>

<script>
import { getnenghaolistapi } from '@/api/energy-consumption/Basic-information/FlowDirection'
import * as echarts from 'echarts';
import {ColorList,convertChildrenListToChildren,shuffleArray} from '@/utils/array'
export default {
  name: 'CallPoliceElecimage',
  props: {
    form: {
      type:Object
    },
    companyId: {
      // type:String
    }
  },
  data() {
    return {
      danwei:''
    };
  },

  mounted() {
    
  },

  methods: {
    // 获取树图
    async getnenghaoechart() {
      this.danwei=this.form.energyType=='01'?'kWh':'m³'
      var chartDom = this.$refs.nenghaoimage
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const obj=this.form
      const {data:{entity}} = await getnenghaolistapi({
        companyId: this.companyId, dateType: obj.dateType, energyType: obj.energyType,
        dateString: obj.dateType == '1' ? obj.value1 : obj.dateType == '2' ? obj.value2 : obj.value3,
      })
      let convertedData = convertChildrenListToChildren(entity,ColorList);
      const data=[convertedData]
      option = {
          tooltip : {
              show: true,
              trigger: 'item',
          formatter: "{b}: {c}",
          backgroundColor:'rgba(250, 250, 250, 0.1)'
          },
          series: {
              top: '1%',
              left: '10%',
              bottom: '1%',
              right: '10%',
              type: 'tree',
            data: data,
            roam:true,
            symbolKeepAspect:true,
            initialTreeDepth: 3,
            lineStyle: {
                color: 'skyblue' // 设置线条颜色为红色
            },
              emphasis: {
                  focus: 'ancestor',
              },
              label: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                fontSize: 14,
                formatter: function (params) {
                  var label =   params.name + '  ' + params.value ;
                    return label;
                }
              },
              leaves: {
                  label: {
                      position: 'right',
                      verticalAlign: 'middle',
                      align: 'left',
                  },
              },
          },
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      loading.close()
    },
  },
};
</script>

<style scoped>
/* .danwei{
  text-align: right;
} */
.eleimage{
  height: 95%;
}
/* .footer{
  text-align: center;
} */
.title{
  display: flex;
  justify-content: space-between;
 }
</style>